<template>
  <div id="information" v-loading="showLoading">
    <cus-Breadcrumb level1="资料学习" level2="资料管理" class="mb20"></cus-Breadcrumb>
    <el-select
      allow-create
      size="small"
      default-first-option
      v-model="ChildDictionaryList3.id"
      placeholder="请选择资料分类"
    >
      <el-option
        v-for="item in ChildDictionaryList3"
        :key="item.id"
        :label="item.content"
        :value="item.id"
        @click.native="refreshID2(item)"
      ></el-option>
    </el-select>
    <div class="tipStyle2">
      <i class="el-icon-view"></i>
      默认查询全部资料，点击左侧下拉菜单根据分类查询习题
    </div>
    <el-button type="success" @click="add" class="add" v-if="zlzlAdd">新增资料</el-button>
    <!-- <el-input placeholder="输入快捷查询" icon="search"  class="search-input" suffix-icon="el-icon-search">
    </el-input>-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="文件名称" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.resourceName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" width="240">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.modifyTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件类型" width="240">
        <template slot-scope="scope">
          <i class="el-icon-document"></i>
          <span style="margin-left: 10px">{{ scope.row.resourceType? '视频' : 'pdf' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ (scope.row.size/1024/1024).toFixed(2) + 'MB' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="zlzlEdit">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row);removeFile(scope.$index ,scope.row)"
            v-if="zlzlDelete"
          >删除</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handlePreview(scope.$index, scope.row)"
            v-if="zlzlView"
          >预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagenation"
      :current-page="1"
      :page-sizes="[10]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total"
      id="page"
    ></el-pagination>
    <el-dialog
      title="新增资料"
      :visible.sync="addNewinf"
      class="dialogAdd"
      :before-close="closeAddNewExcrise"
    >
      <el-upload
        class="upload-demo"
        close-on-click-modal
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview1"
        :before-upload="beforeUpdata"
        multiple
        :limit="3"
        :on-exceed="handleExceed1"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传视频和PDF文件，且不能超过100MB</div>
      </el-upload>
      <el-form ref="form" label-width="80px">
        <el-form-item label="资料类型" class="informKind" v-if="subflag">
          <el-radio v-model="addExeForm.resourceType" :label="1" value="0" name="radios" disabled>视频</el-radio>
          <el-radio
            v-model="addExeForm.resourceType"
            :label="0"
            value="0"
            name="radios"
            disabled
          >PDF文档</el-radio>
        </el-form-item>
        <el-form-item label="资料种类" style="width:auto" v-if="subflag">
          <el-select
            allow-create
            size="small"
            default-first-option
            v-model="ChildDictionaryList2.id"
            placeholder="请选择资料分类"
          >
            <el-option
              v-for="item in ChildDictionaryList2"
              :key="item.id"
              :label="item.content"
              :value="item.id"
              @click.native="refreshID(item)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资料名称" v-if="subflag">
          <el-input class="infinput" v-model="addExeForm.resourceName"></el-input>
        </el-form-item>
        <el-button type="primary" plain @click="SubmitAddNew" v-if="subflag">提交</el-button>
      </el-form>
      <el-tag class="information" v-if="!subflag">请先点击文件上传上传文件后再进行其他操作,系统会自动检测文件类型</el-tag>
      <video :src="Src" id="preview" controls v-if="flag==1"></video>
      <iframe :src="Src" frameborder="0" v-if="flag==2" class="iframe"></iframe>
    </el-dialog>
    <el-dialog :visible.sync="previewBox" title="预览文件">
      <iframe :src="previewSrc" frameborder="0" class="previfram"></iframe>
    </el-dialog>
    <el-dialog :visible.sync="editflag" title="编辑">
      <el-upload
        class="upload-demo2"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpdata2"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList2"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary">选取新文件</el-button>
        <el-button
          style="margin-left: 10px;"
          size="small"
          type="success"
          @click="submitUpload2"
        >上传到服务器覆盖原文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传MP4/PNG文件，且不超过500kb</div>
      </el-upload>
      <el-form ref="form" :model="editList" label-width="80px">
        <el-form-item label="资料名称" label-width="120px">
          <el-input v-model="editList.resourceName"></el-input>
        </el-form-item>
        <el-form-item label="资料类型" label-width="120px">
          <el-input :value="editList.resourceType?'视频':'pdf'" disabled></el-input>
        </el-form-item>
        <el-form-item label="资料大小" label-width="120px">
          <el-input v-model="editList.size" disabled></el-input>
        </el-form-item>
        <el-form-item label="更改资料类型" label-width="120px" class="right">
          <el-radio v-model="video" label="1" border>视频</el-radio>
          <el-radio v-model="video" label="0" border>PDF文档</el-radio>
        </el-form-item>
        <div class="btBOX">
          <el-button type="primary" @click="pushEditKnoledge">提交</el-button>
          <el-button>重置</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import $$ from '@/plugins/statusCode.config'
export default {
  data () {
    return {
      zlzlAdd: false,
      zlzlEdit: false,
      zlzlDelete: false,
      zlzlView: false,
      item: {
        pageSize: 10,
        pageNo: 1
      },
      removeFileId: '',
      subflag: false,
      showLoading: false,
      video: '',
      fileList2: [],
      editflag: false,
      previewBox: false,
      previewSrc: '',
      href: '',
      uploadResourceId: '',
      viewResourceId: '',
      addNewinf: false,
      value: {},
      Src: '',
      flag: 0,
      keyName: 'resourceStudy',
      total: 0,
      ChildDictionaryList1: [],
      ChildDictionaryList2: [],
      ChildDictionaryList3: [],
      fileList: [],
      options: {},
      addExeForm: {
        resourceName: '',
        resourceFileId: '',
        resourceFilePath: '',
        size: '',
        resourceCategory: '',
        resourceType: 3
      },
      tableData: [],
      searchInformationList: {
        resourceCategory: '',
        pageSize: '',
        pageNo: ''
      },
      editList: {
        id: '',
        resourceName: '',
        resourceType: '',
        resourceFileId: '',
        resourceFilePath: '',
        size: '',
        resourceCategory: ''
      }
    }
  },
  created () {
    this.showLoading = true
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName = sessionStorage.getItem('managerNickName')
    this.searchChildDictionaryByKeyName(this.keyName)
  },
  mounted () {
    this.selectAllInf(this.item)
    this.role()
  },
  methods: {
    role () {
      let arr = JSON.parse(sessionStorage.getItem('buttonRole'))
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 'zlzl-add') {
          this.zlzlAdd = true
        }
        if (arr[i] === 'zlzl-edit') {
          this.zlzlEdit = true
        }
        if (arr[i] === 'zlzl-delete') {
          this.zlzlDelete = true
        }
        if (arr[i] === 'zlzl-view') {
          this.zlzlView = true
        }
      }
    },
    handleSizeChange (val) {
      this.item.PageSize = val
      if (this.viewResourceId || this.uploadResourceId) {
        this.getInformatinonList(this.item)
      } else {
        this.selectAllInf(this.item)
      }
    },
    handleCurrentChange (val) {
      this.item.pageNo = val
      if (this.viewResourceId || this.uploadResourceId) {
        this.getInformatinonList(this.item)
      } else {
        this.selectAllInf(this.item)
      }
    },
    // 点击编辑推送信息显示在页面上的逻辑
    async handleEdit (index, row) {
      this.editflag = true
      this.editList.id = row.id
      this.editList.resourceName = row.resourceName
      this.editList.resourceType = row.resourceType
      this.editList.resourceFileId = row.resourceFileId
      this.editList.resourceFilePath = row.resourceFilePath
      this.editList.size = (row.size / 1024 / 1024).toFixed(2) + 'MB'
      this.editList.size2 = row.size
      this.editList.resourceCategory = row.resourceCategory
    },
    // 编辑文件发送请求的逻辑
    async pushEditKnoledge () {
      const param = new URLSearchParams()
      const that = this
      param.append('id', this.editList.id)
      param.append('resourceName', this.editList.resourceName)
      param.append('resourceType', this.editList.resourceType)
      param.append('resourceFileId', this.editList.resourceFileId)
      param.append('resourceFilePath', this.editList.resourceFilePath)
      param.append('size', this.editList.size2)
      param.append('resourceCategory', this.editList.resourceCategory)
      await this.$http8080
        .post('/resource-study-operate/modify', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20002) {
            that.$message.success('文件修改成功')
            that.editflag = false
            that.getInformatinonList(that.item)
          } else {
            that.$message.error(res.data.tatusMsg)
          }
        })
    },
    // 点击删除删除资料数据的逻辑
    async handleDelete (index, row) {
      this.showLoading = true
      const param = new URLSearchParams()
      const that = this
      param.append('id', row.id)
      param.append('resourceFileId', row.resourceFileId)
      await this.$http8080
        .post('/resource-study-operate/remove', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20002) {
            that.showLoading = false
            that.$message.success('资料删除成功')
            that.getInformatinonList(that.item)
          } else if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                }
              })
          } else {
            that.$message.error(res.data.statusMsg)
          }
        })
    },
    // 点击删除是删除文件的逻辑
    async removeFile (index, row) {
      this.showLoading = true
      const param = new URLSearchParams()
      const that = this
      param.append('id', row.resourceFileId)
      await this.$http8080
        .post('/resource-study-operate/deleteFile', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s90002) {
            that.showLoading = false
            that.$message.success('成功删除文件')
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.removeFile(index, row)
                }
              })
          }
        })
    },
    beforeUpdata (file) {
      this.showLoading = true
      let fd = new FormData()
      fd.append('file', file)
      const that = this
      this.$http8080
        .post('/resource-study-operate/uploadFile', fd)
        .then(function (res) {
          if (res.data.statusCode === $$.s90000) {
            that.removeFileId = res.data.data.id
            if (res.data.data.extName === 'pdf') {
              that.addExeForm.resourceType = 0
              that.flag = 2
              that.subflag = true
            } else if (res.data.data.extName === 'mp4') {
              that.addExeForm.resourceType = 1
              that.flag = 1
              that.subflag = true
            }
            that.showLoading = false
            that.$message.success(res.data.statusMsg)
            that.addExeForm.resourceName = res.data.data.fileName
            that.addExeForm.resourceFileId = res.data.data.id
            that.addExeForm.resourceFilePath = res.data.data.storagePath
            that.addExeForm.size = res.data.data.size
            that.addExeForm.resourceCategory = that.uploadResourceId
            that.Src =
              'http://' + $$.fileIp + '/group1/' + res.data.data.storagePath
          } else if (res.data.statusCode === $$.s70003) {
            that.showLoading = false
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                }
              })
          } else {
            that.showLoading = false
            that.$message.error(res.data.statusMsg)
          }
        })
      return false
    },
    handleRemove1 (file, fileList) {},
    handlePreview1 (file) {},
    handleExceed1 (files, fileList) {},
    // 选取新文件后上传的逻辑
    beforeUpdata2 (file) {
      let fd = new FormData()
      fd.append('file', file)
      const that = this
      this.showLoading = true
      this.$http8080
        .post('/resource-study-operate/uploadFile', fd)
        .then(function (res) {
          that.showLoading = false
          that.editList.resourceFileId = res
        })
      return false
    },
    add () {
      this.addNewinf = true
      this.ChildDictionaryList2 = JSON.parse(this.ChildDictionaryList1)
    },
    // 编辑时的子字典ID
    refreshID (item) {
      this.uploadResourceId = item.id
    },
    // 编辑完显示整个列表的子字典ID
    refreshID2 (item) {
      this.uploadResourceId = null
      this.viewResourceId = item.id
      this.getInformatinonList(this.item)
    },
    // 点击覆盖原文件上传时的提示
    submitUpload2 () {
      this.$alert(
        '此操作将覆盖源文件，请谨慎操作，点击确定继续执行',
        '请注意',
        {
          confirmButtonText: '确定',
          callback: action => {
            this.removeFile(this.editList)
            this.$refs.upload.submit()
          }
        }
      )
    },
    handleRemove (file, fileList) {},
    // 编辑文件地址逻辑
    handlePreview (index, row) {
      this.previewSrc =
        'http://' + $$.fileIp + '/group1/' + row.resourceFilePath
      this.previewBox = true
    },
    // 根据关键字查找子字典列表
    async searchChildDictionaryByKeyName (keyName) {
      const that = this
      const param = new URLSearchParams()
      param.append('keyName', keyName)
      await this.$http8081
        .post(`/dictionary-search/flipListByKeyName`, param)
        .then(function (res) {
          that.showLoading = false
          if (res.data.statusCode === $$.s20006) {
            that.ChildDictionaryList1 = JSON.stringify(res.data.data)
            that.ChildDictionaryList2 = JSON.parse(that.ChildDictionaryList1)
            that.ChildDictionaryList3 = JSON.parse(that.ChildDictionaryList1)
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.searchChildDictionaryByKeyName(_that.keyName)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
        })
    },
    // 资料上传提价文件
    async SubmitAddNew () {
      this.showLoading = true
      const that = this
      const param = new URLSearchParams()
      param.append('resourceName', this.addExeForm.resourceName)
      param.append('resourceType', this.addExeForm.resourceType)
      param.append('resourceFileId', this.addExeForm.resourceFileId)
      param.append('resourceFilePath', this.addExeForm.resourceFilePath)
      param.append('size', this.addExeForm.size)
      param.append('resourceCategory', this.uploadResourceId)
      this.$http8080
        .post('/resource-study-operate/save', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20000) {
            that.subflag = false
            that.showLoading = false
            that.$message.success('添加成功')
            that.addNewinf = false
            that.getInformatinonList(that.item)
            that.addExeForm.resourceName = ''
            that.addExeForm.resourceType = ''
            that.addExeForm.resourceFileId = ''
            that.addExeForm.resourceFilePath = ''
            that.addExeForm.size = ''
            that.addExeForm.resourceCategory = ''
            that.flag = 0
            that.Src = ''
            that.ChildDictionaryList2 = {}
          } else if (res.data.statusCode === $$.s70003) {
            that.showLoading = false
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.searchChildDictionaryByKeyName(_that.keyName)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          } else {
            that.showLoading = false
            that.$message.error(res.data.statusMsg)
          }
        })
      return false
    },
    // 渲染资料列表
    async getInformatinonList (item) {
      this.showLoading = true
      const that = this
      const param = new URLSearchParams()
      param.append(
        'resourceCategory',
        this.viewResourceId || this.uploadResourceId
      )
      param.append('pageSize', item.pageSize)
      param.append('pageNo', item.pageNo)
      this.$http8081
        .post('/resource-study-search/flipList', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            that.total = res.data.data.total
            that.showLoading = false
            that.tableData = res.data.data.records
          }
          if (res.data.statusCode === $$.s70003) {
            that.showLoading = false
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.getInformatinonList(_that.item)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
        })
    },
    // 关闭新增页面删除已经上传的文件逻辑
    async closeRemoveTheFile (foo) {
      this.showLoading = true
      const param = new URLSearchParams()
      const that = this
      param.append('id', this.removeFileId)
      await this.$http8080
        .post('/resource-study-operate/deleteFile', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s90002) {
            that.showLoading = false
            that.$message.success('成功取消文件上传')
            foo()
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.closeRemoveTheFile()
                }
              })
          }
        })
    },
    // 关闭新增页面时触发删除已经上传的逻辑
    async closeAddNewExcrise (done) {
      if (this.removeFileId) {
        this.$confirm('您确定取消资料文件上传吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.closeRemoveTheFile(done)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消关闭本窗口'
            })
          })
      } else {
        done()
      }
    },
    async selectAllInf (item) {
      this.showLoading = true
      const that = this
      const param = new URLSearchParams()
      param.append('pageSize', item.pageSize)
      param.append('pageNo', item.pageNo)
      this.$http8081
        .post('/resource-study-search/flipList', param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            that.total = res.data.data.total
            that.showLoading = false
            that.tableData = res.data.data.records
          }
          if (res.data.statusCode === $$.s70003) {
            that.showLoading = false
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.selectAllInf(_that.item)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
        })
    }
  }
}
</script>
<style>
#page {
  position: absolute;
  right: 20px;
  top: 30px;
}
.dialogAdd {
  height: 800px;
}
.el-dialog {
  height: 660px;
}
#information {
  position: relative;
}
.informKind {
  margin-top: 15px;
}
.infinput {
  width: 300px;
}
.search-input {
  width: 300px;
  margin-left: 30px;
}
.add {
  margin-left: 520px;
}
#preview {
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
  position: absolute;
  right: 60px;
  top: 30px;
}
.previewTitle {
  position: absolute;
  top: 56px;
  left: 500px;
}
.iframe {
  width: 700px;
  height: 600px;
  position: absolute;
  right: 0;
  top: 50px;
}
.target {
  color: antiquewhite;
  text-decoration: none;
}
.previfram {
  width: 100%;
  height: 100%;
}
.el-dialog__body {
  height: 87%;
}
.el-dialog__body {
  padding: 5px 20px;
}
.upload-demo2 {
  margin-bottom: 35px;
  margin-top: 25px;
}
.right {
  text-align: none;
}
.btBOX {
  width: 80%;
  text-align: center;
  margin: 15px auto;
}
.el-upload-list__item:first-child {
  width: 45%;
}
.el-form-item__label {
  width: auto !important;
}
.information {
  margin-top: 10px;
}
</style>
